// 登录页面

import { useState } from "react";
import { Button, Form, Input, Card, message } from "antd";
import { useNavigate } from "react-router-dom";
import useUserInfoStore from "./store";

const Login = () => {
    const setUserInfo = useUserInfoStore((state) => state.setUserInfo);
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();

    const onFinish = (values: { username: string; password: string }) => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            if (values.username === "admin" && values.password === "admin") {
                messageApi.success("登录成功！");
                setUserInfo({ username: values.username, password: values.password });
                navigate("/");
            } else {
                messageApi.error("用户名或密码错误");
            }
        }, 1000);
    };

    return (
        <div style={{
            minHeight: "100vh",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            background: "#f0f2f5"
        }}>
            <Card title="登录" style={{ minWidth: 320 }}>
                <Form
                    name="login"
                    initialValues={{ username: "", password: "" }}
                    onFinish={onFinish}
                    layout="vertical"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: "请输入用户名" }]}
                    >
                        <Input placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: "请输入密码" }]}
                    >
                        <Input.Password placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" block loading={loading}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
            {contextHolder}
        </div>
    );
};

export default Login;